import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { userModifyTagsService } from '../../api/userService'
import { currentUserStore } from '../../stores/currentUserStore'

Page({
  data: {
    // 用户当前已选标签
    selectedTags: [],
    // 最大可选标签数
    maxTags: 10,
    // 自定义标签输入
    customTagInput: "",
    // 标签分类数据
    tagCategories: [
      {
        name: "兴趣爱好",
        subCategories: [
          {
            name: "运动类",
            tags: ["篮球", "足球", "羽毛球", "跑步", "健身", "游泳", "滑雪", "瑜伽"],
          },
          {
            name: "音乐类",
            tags: ["摇滚", "古典", "电子", "流行", "KPOP", "嘻哈", "爵士", "民谣"],
          },
          {
            name: "游戏类",
            tags: ["英雄联盟", "DOTA2", "王者荣耀", "原神", "Switch", "Steam", "桌游"],
          },
          {
            name: "影视类",
            tags: ["科幻", "悬疑", "恐怖", "动漫", "漫威", "DC", "日剧", "韩剧", "美剧"],
          },
          {
            name: "书籍类",
            tags: ["科幻小说", "推理小说", "文学", "心理学", "历史", "哲学", "经济学"],
          },
        ],
      },
      {
        name: "技术领域",
        subCategories: [
          {
            name: "编程语言",
            tags: ["Java", "Python", "Go", "C++", "Rust", "JavaScript", "TypeScript"],
          },
          {
            name: "技术方向",
            tags: ["前端", "后端", "全栈", "大数据", "人工智能", "嵌入式", "游戏开发"],
          },
          {
            name: "云计算",
            tags: ["Docker", "Kubernetes", "AWS", "阿里云", "腾讯云", "DevOps"],
          },
          {
            name: "数据分析",
            tags: ["SQL", "Pandas", "Machine Learning", "Deep Learning"],
          },
          {
            name: "移动开发",
            tags: ["Android", "iOS", "Flutter", "React Native"],
          },
        ],
      },
      {
        name: "生活方式",
        subCategories: [
          {
            name: "饮食偏好",
            tags: ["素食主义", "奶茶爱好者", "咖啡控", "甜食爱好者", "无辣不欢"],
          },
          {
            name: "旅游偏好",
            tags: ["城市游", "自然风光", "海岛度假", "徒步旅行", "自驾游", "背包客"],
          },
          {
            name: "作息习惯",
            tags: ["早睡早起", "夜猫子", "熬夜党", "晨跑爱好者"],
          },
        ],
      },
      {
        name: "学习生活",
        subCategories: [
          {
            name: "在读学历",
            tags: ["本科", "研究生", "博士"],
          },
          {
            name: "学习方向",
            tags: ["计算机", "经济学", "心理学", "哲学", "法律", "医学"],
          },
          {
            name: "职业领域",
            tags: ["互联网", "金融", "教育", "法律", "医疗", "自由职业"],
          },
        ],
      },
      {
        name: "MBTI",
        subCategories: [
          {
            name: "人格类型",
            tags: [
              "ESFP",
              "ISFP",
              "ENFJ",
              "ENFP",
              "ESTP",
              "ISTP",
              "INFJ",
              "INFP",
              "ESFJ",
              "ISFJ",
              "ENTP",
              "INTP",
              "ESTJ",
              "ISTJ",
              "ENTJ",
              "INTJ",
            ],
          },
        ],
      },
      {
        name: "自定义",
        isCustom: true,
      },
    ],
    // 自定义标签列表
    customTags: [],
  },

  onLoad(options) {
    this.currentUserStoreBinding = createStoreBindings(this, {
      store: currentUserStore,
      fields: ['id', 'username', 'gender', 'avatar', 'description', 'openId', 'wechatId', 'tags', 'createTime', 'qqId'],
      actions: ['updateUserName', 'updateGender', 'updateAvatar', 'updateDescription', 'updateWeChatId', 'updateQQId', 'updateTags', 'updateCurrentUser']
    })
    
  },

  onReady() {
    // 从用户信息中获取已有标签
    this.setData({
      selectedTags: this.data.tags,
    })
  },

  onUnload() {
    // 页面卸载时销毁store实例
    this.currentUserStoreBinding.destroyStoreBindings()
  },

  // 切换标签选择状态
  toggleTag(e) {
    const { tag } = e.currentTarget.dataset
    const { selectedTags, maxTags } = this.data

    const index = selectedTags.indexOf(tag)

    if (index > -1) {
      // 如果标签已选中，则取消选中
      selectedTags.splice(index, 1)
      this.setData({ selectedTags })
    } else {
      // 如果标签未选中，且未超过最大数量，则选中
      if (selectedTags.length < maxTags) {
        this.setData({
          selectedTags: [...selectedTags, tag],
        })
      } else {
        // 超过最大数量，提示用户
        wx.showToast({
          title: `最多只能选择${maxTags}个标签`,
          icon: "none",
        })
      }
    }
  },

  // 添加自定义标签
  addCustomTag() {
    const { customTagInput, selectedTags, maxTags, customTags } = this.data

    // 去除首尾空格
    const trimmedTag = customTagInput.trim()
    // console.log(customTagInput)

    if (!trimmedTag) {
      wx.showToast({
        title: "标签内容不能为空",
        icon: "none",
      })
      return
    }

    // 检查是否已存在相同标签
    if (selectedTags.includes(trimmedTag) || customTags.includes(trimmedTag)) {
      wx.showToast({
        title: "该标签已存在",
        icon: "none",
      })
      return
    }

    // 检查是否超过最大数量
    if (selectedTags.length >= maxTags) {
      wx.showToast({
        title: `最多只能选择${maxTags}个标签`,
        icon: "none",
      })
      return
    }

    // 添加到自定义标签列表和已选标签
    this.setData({
      customTags: [...customTags, trimmedTag],
      selectedTags: [...selectedTags, trimmedTag],
      customTagInput: "", // 清空输入框
    })
  },

  // 输入自定义标签
  onCustomTagInput(e) {
    this.setData({
      customTagInput: e.detail,
    })
  },

  // 删除自定义标签
  deleteCustomTag(e) {
    const { tag } = e.currentTarget.dataset
    const { customTags, selectedTags } = this.data

    // 从自定义标签列表中删除
    const updatedCustomTags = customTags.filter((item) => item !== tag)

    // 从已选标签中删除
    const updatedSelectedTags = selectedTags.filter((item) => item !== tag)

    this.setData({
      customTags: updatedCustomTags,
      selectedTags: updatedSelectedTags,
    })
  },

  // 保存标签
  async saveTags() {
    const { selectedTags } = this.data

    if (selectedTags.length === 0) {
      wx.showToast({
        title: "请至少选择一个标签",
        icon: "none",
      })
      return
    }

    // 对标签进行排序
    // const sortedTags = this.sortTagsByCategory(selectedTags)

    // 这里应该调用API保存标签
    const result = await userModifyTagsService(selectedTags)

    if (result.code === 200) {
      // 保存成功
      this.updateTags(selectedTags)
      wx.showToast({
        title: "标签保存成功",
        icon: "success",
        success: () => {
          // 延迟返回上一页
          setTimeout(() => {
            wx.navigateBack()
          }, 1500)
        },
      })
    }

    
  },

  // 按分类对标签进行排序
  sortTagsByCategory(tags) {
    const { tagCategories } = this.data
    const result = []
    const tagCategoryMap = new Map()

    // 创建标签到分类的映射
    tagCategories.forEach((category, categoryIndex) => {
      if (category.isCustom) {
        // 自定义标签单独处理
        this.data.customTags.forEach((tag) => {
          tagCategoryMap.set(tag, {
            categoryIndex: categoryIndex,
            subCategoryIndex: 0,
            tagIndex: -1, // 自定义标签没有固定顺序
          })
        })
      } else {
        category.subCategories.forEach((subCategory, subCategoryIndex) => {
          subCategory.tags.forEach((tag, tagIndex) => {
            tagCategoryMap.set(tag, {
              categoryIndex,
              subCategoryIndex,
              tagIndex,
            })
          })
        })
      }
    })

    // 对标签进行排序
    return tags.sort((a, b) => {
      const aInfo = tagCategoryMap.get(a)
      const bInfo = tagCategoryMap.get(b)

      // 如果找不到标签信息，将其视为自定义标签
      if (!aInfo) return 1
      if (!bInfo) return -1

      // 先按大分类排序
      if (aInfo.categoryIndex !== bInfo.categoryIndex) {
        return aInfo.categoryIndex - bInfo.categoryIndex
      }

      // 同一大分类内，按子分类排序
      if (aInfo.subCategoryIndex !== bInfo.subCategoryIndex) {
        return aInfo.subCategoryIndex - bInfo.subCategoryIndex
      }

      // 同一子分类内，按标签顺序排序
      return aInfo.tagIndex - bInfo.tagIndex
    })
  },
})
